import React, { VFC, useEffect, useState } from "react"
import {  Table, Select,TablePaginationConfig, Button } from 'antd';
import { useHistory } from "react-router-dom";
// import styled from "styled-components";
import { getConsultAppointment} from '@services/index';
import {useRecoilValue} from 'recoil'
import { fetchProjectIssueAllList } from '@selectors/selectProduct';
import PageContent from '@layout/PageContent';

const { Option } = Select;

const Appointment:VFC = () => {
    const {location} = useHistory() as any
    const [dataList, setDataList] = useState<any[]>([]);
    let [issueId, setIssueId] = useState<string|undefined>(undefined);
    const [loading, setLoading] = useState<boolean>(false)
    const [pagination, setPagination] = useState<TablePaginationConfig>({
        current: 1,
        pageSize: 10,
        total: 0,
        showTotal: total => `共 ${total} 条 `,
    });

    useEffect(()=>{
        initData()
    },[]); 
    // 获取列表 数据
    const initData= async () =>{
        setLoading(true)
        try{
            const { data, status } = await getConsultAppointment({
                phaseId: location.state?.phaseId,
                pageNum: pagination.current,
                pageSize:pagination.pageSize,
                issueId: issueId,
            })
            if(status === '0'){
                setDataList(data.list);
                setPagination({
                    ...pagination,
                    total:data.total
                });
            }
        }finally{
            setLoading(false)
        }
    }
    // 触发分页
    const onTableChange = (page:TablePaginationConfig) => {
        pagination.current = page.current
        pagination.pageSize = page.pageSize
        setPagination({...pagination})
        initData();
    }
    const renderSearch = () => (
        <div className="box-search dflex br2">
            <div className="search-items dflex">
                <div className="_items dflex">
                    <label>所属期数</label>
                    <Select value={issueId} style={{ width: 120 }} onChange={e => setIssueId(e)}>
                        {
                            useRecoilValue(fetchProjectIssueAllList).map( (item, key) => {
                                return <Option value={item.id} key={key}>{item.name}</Option>
                            })
                        }
                    </Select>
                </div>
            </div>
            <div className="btns">
                <Button type="primary" onClick={initData}>查询</Button>
            </div>
        </div>
    )
    // 表格列名称
    const columns:any = [
        { title: '团队名称', dataIndex: 'teamName', render: (r: any) => <div>{r?r:'-'}</div>},
        { title: '所选时间', dataIndex: 'time', render: (r: any) => <div>{r?r:'-'}</div>},
    ]
    return (
        <>
            {renderSearch()}
            <PageContent title={location.state?.name}>
                <Table 
                    rowKey={({id})=> id}
                    bordered
                    columns={columns} 
                    dataSource={dataList}
                    onChange={onTableChange}
                    pagination={pagination}
                    loading={loading}
                    scroll={{ x: 0 }}
                />
            </PageContent>
        </>
    )
}
export default Appointment


